<template>
	<view>
		<view style="background-color: ; height: 92vh;">
			<view>
				<up-image :show-loading="true" src="http://qiniu.gaowa.love/65d7128ce5aed1708593804.jpg" width="100%"
					height="100vh" @click="click"></up-image>
			</view>
			<view class="form" style="transform: scale(0.9);background-color:transparent;
			backdrop-filter: blur(10px);
			margin-top: -600px;
			z-index: 0;
				box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); border-radius: 10px; height: 300px;">
				<u-tabs :list="list1" @click="tabClick"
					style="margin-top: -40px;margin-left: -10px;padding-bottom: 20px;" :current='1'></u-tabs>
				<text style="font-size: 16px;">账号密码登陆</text>
				<u-form labelPosition="left" :model="form" :rules="rules" ref="form1">
					<u-form-item label="" prop="mobile" ref="item1">
						<u-input v-model="form.mobile" type="number" placeholder="请输入手机号" maxlength="11"
							:clearable="clear" border="surround"></u-input>
					</u-form-item>
					<u-form-item label="" prop="password" ref="item1">
						<u-input v-model="form.password" password border="surround" placeholder="请输入密码"></u-input>
					</u-form-item>
					<u-form-item label="" prop="password" ref="item1" v-if="showInput">
						<u-input v-model="form.validation" password border="surround" placeholder="请确认密码"></u-input>
					</u-form-item>
					<u-form-item label="" prop="password" ref="item1" v-if="showInput">
						<u-input v-model="form.code" password border="surround" placeholder="请输入邀请码"></u-input>
					</u-form-item>
					<text style="font-size: 12px;" v-if="showText">手机号登陆</text>
					<view class="btn" style="margin-top: 10px;">
						<up-button type="primary" size="small" text="登录" @click="login" v-if="showText"></up-button>
						<up-button type="primary" size="small" text="注册" @click="register" v-if="showInput"></up-button>
					</view>
				</u-form>
			</view>
		</view>
	</view>
</template>
<script>
	// import login from 'request/API/login.js';
	import {
		login
	} from "../../request/API/login";
	import {
		register
	} from "../../request/API/register.js"
	export default {
		data() {
			return {
				value: '',
				clear: true,
				list1: [{
					name: '注册',
				}, {
					name: '登录',
				}],
				showInput: false,
				showText: true,
				// username: "手机号/邮箱",
				closable: true,
				form: {
					mobile: "",
					password: "",
					validation: "",
					code: ""
				},
				// rules: {
				// 	mobile: [{
				// 		required: true,
				// 		message: "请输入手机号",
				// 		trigger: ["blur", "change"],
				// 	}],
				// 	password: [{
				// 		required: true,
				// 		message: "请输入密码",
				// 		trigger: ["blur", "change"],
				// 	}],
				// },
			}
		},
		methods: {
			login() {
				const mobile = this.form.mobile;
				const password = this.form.password;

				const Data = {
					mobile: mobile,
					password: password,
				};
				//登录接口
				login(Data)
					.then(data => {
						console.log(data)
						if (data.code === 1) {
							uni.setStorageSync('token', data.data);
							uni.navigateBack({
								// url: "/pages/home/home"
								delta: 1,
								// animationDuration: 2000
							})
						}
					})
					.catch(error => {
						// 登录失败的处理逻辑
						console.error('登录失败', error);
						uni.showToast({
							title: error.msg,
							icon: 'none',
						});
					});
				console.log(mobile)
			},
			register() {
				const mobile = this.form.mobile;
				const password = this.form.password;
				const validation = this.form.validation;
				const code = this.form.code;
				const Data = {
					mobile: mobile,
					password: password,
					validation: validation,
					code: code
				};
				register(Data)
					.then(data => {
						console.log(data)
						if (data.code === 1) {
							uni.setStorageSync('token', data.data);
							uni.redirectTo({
								url: "/pages/home/home"
								// animationDuration: 2000
							})
						}
					})
					.catch(error => {

					})
				console.log(123)
			},
			tabClick(e) {
				console.log(e.index)
				if (e.index == 0) {
					this.showInput = true;
					this.showText = false;
				} else {
					this.showInput = false;
					this.showText = true;
				}
			}
		}
	}
</script>

<style>
	.form {
		position: relative;
		padding: 40px;
		margin-top: 50%;
	}

	.btn {
		margin-top: 60rpx;
	}

	.a-regiser {
		position: absolute;
		right: 10%;
		margin-top: 20rpx;
		transform: translateY(-50%);
	}
</style>